﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="Js/ElementUI/element-ui.css">
    <script src="js/vue.js"></script>
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <script src="Js/ElementUI/element-ui.js"></script>

</head>

<body>
    <div id="app">
        <div>{{ myMessage }}</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                myData:{},
                message: 'Hello Vue!'
            },
            computed:{
                myMessage(){
                    if(!this.myData.message){return "123"}
                    return `myMessage:${this.myData.message}`;
                }
            },
            async created(){
                await new Promise(resove=>{
                    setTimeout(() => {
                        resove();
                    }, 1000);
                });
                this.myData.message = "changed message";
            }
        })
    </script>
</body>

</html>